
function Button(data) {
    this.image = new Image();
    this.image.src = data.src;
    this.x = data.x;
    this.y = data.y;
    this.context = data.context;
    this.states = {
        normal: 0,
        press: 1,
        visible: 2,
        length: 3,
    };
    this.stateCurrent = this.states.normal;
    this.isClick = false;
    this.value = data.value;
    this.sizeFont = data.sizeFont;
    this.fontColor = "white";
}
Button.prototype = {
    reset: function (){
        this.isClick = false;
        this.stateCurrent = this.states.normal;
    },
    checkStatus: function(x, y, event) {
        var width = this.image.width, height = this.image.height / this.states.length;
        if (x >= this.x && x <= this.x + width && y >= this.y && y <= this.y + height) {

            var radius = 2;
            this.context.save();
            var imageData = this.context.getImageData(x - radius, y - radius, 2 * radius, 2 * radius);
            this.context.clearRect(x - radius, y - radius, 2 * radius, 2 * radius);
            this.draw();
            var data = this.context.getImageData(x, y, 1, 1).data;
            var len = data.length, i;
            for (i = 3; i < len; i += 4)
                if (data[i] != 0) {
                    if (event == "mousedown")
                    {
                        this.stateCurrent = this.states.press;
                        this.isClick = false;
                    }
                    else if (event == "mouseup")
                    {
                        if (this.stateCurrent == this.states.press)
                            this.isClick = true;
                        this.stateCurrent = this.states.visible;
                    }
                    else {
                        this.stateCurrent = this.states.visible;
                        this.isClick = false;
                    }
                    break;
                }
            if (i >= len && event == "mousemove")
                this.stateCurrent = this.states.normal;
            this.context.putImageData(imageData, x - radius, y - radius);
            this.context.restore();
        }
        else if (event == "mousemove")
            this.stateCurrent = this.states.normal;
    },
    draw: function() {
        this.context.save();
        var width = this.image.width, height = this.image.height / this.states.length;
        this.context.drawImage(this.image, 0, this.stateCurrent * height, width, height, this.x, this.y, width, height);
        this.context.font = this.sizeFont + "px arial";
        this.context.textAlign = "center";
        this.context.fillStyle = this.fontColor;
        this.context.fillText(this.value, this.x + width / 2, this.y + height / 2 + this.sizeFont / 3);
        this.context.restore();
    }
}